<template>
    <view>
        <view style="padding: 40rpx;background-color: #fff;">
            <view style="background-color: #37B874;border-radius: 20rpx;padding: 20rpx;">
                <view style="color: #fff;">{{ questionItem.subjectName }}</view>
                <view style="display: flex;justify-content: space-between;;">
                    <view style="display: flex;margin-top: 50rpx;">
                        <view style="display: flex;align-items: center;">
                            <image src="/questionBankMarket/static/text.svg" style="width:40rpx;height: 40rpx;"></image>
                            <text style="color: #fff; font-size: 14px;margin-left: 10rpx;">共{{ questionItem.itemNum || 0
                                }}道</text>
                        </view>
                        <!-- <view style="display: flex;align-items: center;margin-left: 30rpx;">
                            <image src="/questionBankMarket/static/collect.svg" style="width:40rpx;height: 40rpx;">
                            </image>
                            <text style="color: #fff; font-size: 14px;">{{ questionItem.collectNum || 0 }} {{ '人收藏'
                                }}</text>
                        </view> -->

                    </view>
                    <view style="display: flex;align-items: flex-end;">
                        <button open-type="share"
                            style="width: 90rpx;height: 90rpx;border-radius: 50%;background-color: #FFFFFFC2;display: flex;justify-content: center;align-items: center;"
                            @click="onShare">
                            <image src="../static/images/teachingMaterial/shareIcon.svg"
                                style="width:40rpx;height: 40rpx;">
                            </image>
                        </button>
                        <!-- <view
                            style="width: 64rpx;height: 64rpx;border-radius: 50%;background-color: #FFFFFFC2;display: flex;justify-content: center;align-items: center;margin-left: 10rpx;">
                            <image src="../static/images/teachingMaterial/collectIcon.svg"
                                style="width:40rpx;height: 40rpx;">
                            </image>
                        </view> -->
                    </view>
                </view>
            </view>
            <view style="display: flex;justify-content: space-between;margin-top: 40rpx;">
                <view @click="() => {
                    onQuestion(1)
                }">
                    <view
                        style="width: 128rpx;height: 128rpx;border-radius: 50%;background-color: #FFF6F6;display: flex;justify-content: center;align-items: center;">
                        <image src="/questionBankMarket/static/error.svg" style="width:60rpx;height: 60rpx;">
                        </image>
                    </view>
                    <view style="text-align: center;margin-top: 20rpx;">我的错题</view>
                </view>
                <view @click="() => {
                    onQuestion(2)
                }">
                    <view
                        style="width: 128rpx;height: 128rpx;border-radius: 50%;background-color: #FFFAF2;display: flex;justify-content: center;align-items: center;">
                        <image src="/questionBankMarket/static/hours.svg" style="width:60rpx;height: 60rpx;">
                        </image>
                    </view>
                    <view style="text-align: center;margin-top: 20rpx;">我的收藏</view>
                </view>
                <view @click="onAnalysis">
                    <view
                        style="width: 128rpx;height: 128rpx;border-radius: 50%;background-color: #ECFFFE;display: flex;justify-content: center;align-items: center;">
                        <image src="/questionBankMarket/static/analysis.svg" style="width:60rpx;height: 60rpx;">
                        </image>
                    </view>
                    <view style="text-align: center;margin-top: 20rpx;">练习分析</view>
                </view>
            </view>
        </view>
        <view style="margin-top: 30rpx;padding: 40rpx; background-color: #fff;">
            <view style="margin-bottom: 20rpx;font-weight:bold">题库练习</view>
            <view class="flex between" style="flex-wrap: wrap;">
                <!-- class="flex flex-column item-center comItemStyle" -->
                <view v-for="(item, i) in comList" :key="item.title" @click="onJump(item)"
                    :style="{ background: item.bgColor, marginBottom: '28rpx', width: '43%', borderRadius: '20rpx', padding: '20rpx 20rpx 10rpx 20rpx' }">
                    <view :style="{ color: item.color }" style="font-size: 32rpx;margin-top: 20rpx;font-weight:bold">{{
                        item.title }}</view>
                    <view v-if="item.oneT" style="color: #666666;">
                        {{ item.oneT }}
                    </view>
                    <view v-else-if="i === 0" style="color: #666666;">
                        {{ topic.seaNum || 0 }}/{{ topic.seaTotalNum || 0 }}
                    </view>
                    <view v-else-if="i === 1" style="color: #666666;">
                        {{ topic.randomNum || 0 }}/{{ topic.randomTotalNum || 0 }}
                    </view>
                    <!-- <view class="flex"
                        style="align-items: center; font-size: 24rpx; color: #666;line-height: 52rpx;margin-top: 10rpx">
                        <text style="color:#666">{{ item.oneT }}</text>
                        <div class="lineStyle"></div>
                        <text style="color:#666">{{ item.twoT }}</text>
                    </view> -->
                    <image :src="item.icon" style="width: 140rpx;height: 140rpx;float: right;" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getItemMarketDetail, startPractice } from '../services/QuestionBankService';

export default {
    data() {
        return {
            questionItem: {},
            comList: [
                { title: "顺序练习", bgColor: "#37B8740F", icon: '/questionBankMarket/static/sequence.svg', color: "#37B874" },
                { title: "随机练习", bgColor: "#00AC260F", icon: '/questionBankMarket/static/random.svg', color: "#00AC26" },
                { title: "章节练习", bgColor: "#FF9D000F", icon: '/questionBankMarket/static/chapter.svg', oneT: "选择章节练习", color: "#FF9D00" },
                { title: "题型练习", bgColor: "#1ABAB10F", icon: '/questionBankMarket/static/questionType.svg', oneT: "选择题型练习", color: "#1ABAB1" },
                { title: "试题搜索", bgColor: "#2E79D114", icon: '/questionBankMarket/static/search.svg', oneT: "快速查找试题", color: "#2E79D1" },
                { title: "模拟考试", bgColor: "#1A80BA0F", icon: '/questionBankMarket/static/simulate.svg', oneT: "随机抽题模考", color: "#1A80BA" },
            ],
            topic: {}, //做题数量
        }
    },
    onLoad(option) {
        console.log(JSON.parse(decodeURIComponent(option.questionItem)),"---118");
        
        this.questionItem = JSON.parse(decodeURIComponent(option.questionItem))

    },
    computed: {},
    methods: {
        onGetItemMarketDetail() {
            getItemMarketDetail({ marketId: this.questionItem.marketId }).then(res => {
                this.topic = res
            })
        },
        // 跳转练习
        onJump(item) {
            console.log(item, 'item');

            if (item.title === '顺序练习' || item.title === '随机练习') {
                startPractice({ practiceUuid: item.title === '顺序练习' ? this.topic.seaPracticeUuid || '' : this.topic.randomPracticeUuid || '', marketId: this.topic.marketId, practiceType: item.title === '顺序练习' ? 1 : 5, structUuid: '', itemType: '' }).then(res => {
                    uni.navigateTo({
                        url: '/pages/practiceTesting/exercisesPage?practiceUuid=' + res + '&video=true'
                    })
                })

            } else if (item.title === '章节练习') {
                uni.navigateTo({
                    url: '/questionBankMarket/chapterPage?marketId=' + this.questionItem.marketId + '&practiceType=2'
                })
            } else if (item.title === '题型练习') {
                uni.navigateTo({
                    url: '/questionBankMarket/questionTypePage?marketId=' + this.questionItem.marketId + '&practiceType=3'
                })
            } else if (item.title === '试题搜索') {

                uni.navigateTo({
                    url: '/questionBankMarket/questionSearchPage?marketId=' + this.questionItem.marketId
                })
            } else if (item.title === '模拟考试') {
                uni.navigateTo({
                    url: '/questionBankMarket/simulationPage?marketId=' + this.questionItem.marketId
                })
            }

        },
        // 跳转错题和收藏 
        onQuestion(type) {
            uni.navigateTo({
                url: `/questionBankMarket/myWrongQuestionPage?marketId=${this.questionItem.marketId}&title=${type == 1 ? '我的错题' : '我的收藏'}&type=${type}`
            });
        },
        // 跳转分析
        onAnalysis() {
            uni.navigateTo({
                url: '/questionBankMarket/analysisPage?marketId=' + this.questionItem.marketId
            })
        },
        // 分享
        onShare() {
            uni.share({
                provider: "weixin",
                scene: "WXSceneSession",
                type: 1,
                summary: "快来体验练促优",
                success: function (res) {
                    console.log("success:" + JSON.stringify(res));
                },
                fail: function (err) {
                    console.log("fail:" + JSON.stringify(err));
                }
            });
        },
    },
    onShow() {
        this.onGetItemMarketDetail()
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            var that = this;
        }
        return {
            title: this.questionItem.subjectName??"分享信息",
            path: `/questionBankMarket/questionDetailPage?questionItem=${encodeURIComponent(JSON.stringify(this.questionItem,))}`,
            // imageUrl: this.teachingInfo.cover??'https://hyfileonline.bjjrzy.com:19222/428f3bd1326f42e3b47e37de0ddf2607/0.jpg'
        };
    }

}
</script>

<style lang="scss"></style>